class CoordinateAxis {
  constructor(center, radius = 200, axisType = '2d') {
    this.type = 'coodinateAxis';
    this.canDraw = false;

    this.id = Math.random();
    this.is2DAxis = axisType === '2d';
    this.is3DAxis = axisType === '3d';

    this.radius = radius;
    this.center = center;
    this.coordinate = this.getCoordinate();
  }

  getCoordinate() {
    const { center, radius, is2DAxis } = this;
    const axis = {
      xAxis: { x: center.x + radius, y: center.y },
      yAxis: { x: center.x, y: center.y - radius }
    };
    if (is2DAxis) {
      return axis;
    }
    return {
      ...axis,
      zAxis: rotate(center, axis.xAxis, 135)
    };
  }

  render(ctx, canvas) {
    const { center, coordinate, is3DAxis } = this;
    const { xAxis, yAxis, zAxis } = coordinate;
    ctx.beginPath();

    const size = 20;

    ctx.font = `${size}px Arial`;

    ctx.moveTo(center.x, center.y);
    ctx.lineTo(xAxis.x, xAxis.y);
    ctx.fillText('x', xAxis.x + 20, xAxis.y + size / 4);
    
    ctx.moveTo(center.x, center.y);
    ctx.lineTo(yAxis.x, yAxis.y);
    ctx.fillText('y', yAxis.x - size / 4, yAxis.y - size);
    
    if (is3DAxis) {
      ctx.moveTo(center.x, center.y);
      ctx.lineTo(zAxis.x, zAxis.y);
      ctx.fillText('z', zAxis.x - size / 1.5, zAxis.y + size);
    }

    ctx.stroke();
    ctx.closePath();
  }
}